<template>
  <div class="app-container">

    <el-table
    border
    stripe
    show-header
    v-loading="listLoading"
    element-loading-text="Loading"
    fit
    size="small"
    highlight-current-row
    :data="tableData.filter(data => !search || data.address.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
    width="100px"
      label="ID"
      prop="id">
    </el-table-column>
    <el-table-column
    width="150px"
      label="PLC名称"
      prop="plc">
    </el-table-column>
    <el-table-column
      label="地址"
      width="250px"
      prop="address">
      <template slot="header" slot-scope="scope" >
        <div >
          <span>地址</span>
          <el-input
          v-model="search"
          size="small"
          placeholder="输入关键字搜索"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      width="100px"
      label="类型"
      prop="type">
    </el-table-column>
    <el-table-column
      label="采集范围"
      prop="factory">
    </el-table-column>
    <el-table-column
      label="时间"
      prop="date">
    </el-table-column>
    <el-table-column class-name="status-col" label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope" >
        操作
      </template>
      <template slot-scope="scope">
        <el-button
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


  </div>
</template>

<script>
import { getTrendList,delTrendList,updateTrendList } from '@/api/trend'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        active: 'success',
        inactive: 'info',
        error: 'danger',
        warning: 'warning',
        success: 'success',
      }
      return statusMap[status]
    }
  },
  data() {
      return {
        listLoading: true,
        tableData: [],
        search: ''
      }
    },
    created() {
      this.fetchData()
    },

    methods: {
      fetchData() {
      // connPLC()
      this.listLoading = true
      getTrendList().then(response => {
        // console.log(response)
        this.tableData = response.data
        this.listLoading = false
        })
      },

      handleEdit(index, row) {

        // //parameter in req.query
        // setWriteData(
        // {
        // 'value': row.value ,
        // 'id': row.id,
        // })
        // this.fetchData()
        // console.log(index, row);      open() {
          this.$prompt('采集范围修改', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            //支持最长5为 可以有小数点 小数点后最多2位
            //250.25 OK
            //250.230 NG
            //2500000.25 NG
            inputPattern: /(^[1-9]([0-9]{1,5})?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            inputErrorMessage: '数据格式不正确'
          }).then(({ value }) => {

            console.log(row)

            if(row.status == 'active'){
              updateTrendList(
              {
              'factory': value ,
              'id': row.id
              })

              this.fetchData()
              console.log(index, row);

              this.$message({
                type: 'success',
                message: '修改值为: ' + value
              });
            }else{

              this.$message({
                type: 'info',
                message: '该节点未激活'
              });

            }


          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
      },
      handleDelete(index, row) {

        this.$confirm('是否删除该节点数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delTrendList(
          {
          'id': row.id,
          })
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

        console.log(index, row);
      },


    },

    //切换页面后清除定时器
    beforeDestroy() {
      console.log("Table定时器启动")
      clearInterval(this.timer);
    }

}
</script>

